<template>
	<div class="post">
		<div v-if="loading" class="loading">
			Loading...
		</div>

		<div v-if="error" class="error">
			error
		</div>

		<div v-if="post" class="content">
			<h2>post</h2>
		</div>
	</div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				loading: false,
				post: null,
				error: null
			}
		},
		created(){
			this.fetchData()
		},
		watch:{
			'$router': 'fetchData'
		},
		methods:{
			fetchData (){
				this.error = this.post = null
				this.loading = true
				getPost(this.$router.params.id,(err, post)=>{
					this.loading = false
					if (err) {
						this.error = err.toString()
					}else {
						this.post = post
					}
				})

			}
		}
	}

</script>